class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            countdown: 60,
            navhtml: [],
            disheshtml: [],
            clicknavid: 1,
            checkid: -1,
            hasaadd: !1,
            amount: 0,
            gender: -1,
            info: { counts: 0, },
            name: '',
            category: '请选择',
            code: '',
            navList: [
                {
                    lefticon: './src/yue_icon.png',
                    content: '余额支付',
                },
                {
                    lefticon: './src/gh_icon.png',
                    content: '工行收银台',
                },
                // {
                //     lefticon: './src/radio.png',
                //     content: '支付宝',
                // },
                // {
                //     lefticon: './src/radio.png',
                //     content: '微信',
                // },
            ],
        };
    }

    settime() {
        let { countdown } = this.state, that = this;
        if (countdown == 0) {
            //  $('#yzmbtn').attr("disabled",false); 
            $('.right').text("获取验证码");
            this.setState({ countdown: 60 })
        } else {
            // $('#yzmbtn').attr("disabled", true); 
            $('.right').text("重新发送(" + countdown + ")");
            countdown--;
            this.setState({ countdown }, () => {
                setTimeout(function () {
                    that.settime()
                }, 1000)
            })
        }
    }

    click(e) {
        //  let list1 = this.state.navList;
        // let {navList} = this.state;
        // navList.map((x,i)=>{ return x.checked = i==e})
        this.setState({ checkid: e })

    }
    confirm() {
        let that = this, { info } = this.state, name = $('.name').val() || ""
            , phone = $('.phone').val() || "",
            schoolname = $('.schoolname').val() || "",
            address = $('.address').val() || "",
            size = $('.size').val() || "",

            { gender, category } = this.state, err = '';
        if (name.length == 0) err = '姓名输入有误'
        if (gender == -1) err = '请选择性别'
        if (schoolname.length == 0) err = '学校输入有误'
        if (size.length == 0) err = '尺码输入有误'
        if (address.length == 0) err = '收货地址输入有误'
        if (category == '请选择') err = '请选择规格'
        if (phone.length != 11) err = '手机号输入有误'
        if (err != '') {
            alert(err)
        } else {

            let data = { category, phone, size, schoolname,address, name, openid: localStorage.getItem('openid'), gender }
            if (info) {
                data['id'] = info.id
            }
            console.log(data, 'datadata');


            addinfo(data, res => {
                if (res.issuccess == 1) {
                    alert('添加成功')

                    hasadd(res => {
                        if (res.hasadd) {
                            let { gender, category } = res.hasadd
                            that.setState({ info: res.hasadd, gender, category })
                        }
                    })
                    //  that.setState({hasaadd:!0})
                    // localStorage.setItem('user',JSON.stringify(res.user))

                    //  window.location.href='./main.html'
                } else {
                    alert(res.msg)
                }
            })
        }


    }

    yzclick() {
        var phone = $('.phone').val() || "";
        if (phone.length != 11) {
            alert('手机号输入有误')
        } else {
            if ($('.right').text() == '获取验证码') {

                var phone = $('.phone').val() || "";
                sendsms(phone, succ => {
                    if (succ.result == 'successful') {
                        this.settime()
                    } else {
                        alert(succ.msg)
                    }
                })
            }
        }
    }
    inputchange(e) {
        this.setState({ gender: e.target.value })
    }

    inputchange_category(e) {

        // <option value="牛仔拉链">牛仔拉链</option>
        // <option value="牛仔纽扣">牛仔纽扣</option>
        // <option value="夏实训">夏实训</option>
        // <option value="棒球服">棒球服</option>
        // <option value="长T恤">长T恤</option>
        // <option value="短T恤">短T恤</option>
       
        this.setState({ category: e.target.value, amount:getpay(e.target.value) })
    }

    inputchangee(prop, e) {
        let { info } = this.state
        info[prop] = e.target.value
        this.setState({ info })
    }


    componentDidMount() {
        var that = this
        if (Constant.SWITCH_VCONSOLE) {
            new VConsole();
        }

        hasadd(res => {
            if (res.hasadd) {
                let { gender, category } = res.hasadd
                that.setState({ info: res.hasadd, gender, category,amount:getpay(category) })
            }
        })
    }
    render() {

        let { hasaadd, info, gender, category, amount } = this.state;

        return (
            <div>
                { 
                    hasaadd ?
                        <div className="all">
                            <p className="has">
                                您已提交过信息
                            </p>

                        </div>
                        :
                        <div className="all">
                            <div className="table">
                                <div className="yzmitem">
                                    <p>姓名</p>
                                    <input type="text" value={info.name} onChange={this.inputchangee.bind(this, 'name')} placeholder='请填写姓名' className="name" />
                                </div>
                            </div>
                            <div className="yzmitem">
                                <p>手机号</p>
                                <input type='tel' value={info.phone} onChange={this.inputchangee.bind(this, 'phone')} maxLength={11} placeholder='请填写手机号' className="phone" />
                                {/* <p onClick={this.yzclick.bind(this)} className="right">获取验证码</p> */}
                            </div>

                            <div className="yzmitem">
                                <p>性别：</p>
                                <select value={gender || '-1'} onChange={this.inputchange.bind(this)}>
                                    <option value="-1">请选择</option>
                                    <option value="0">男</option>
                                    <option value="1">女</option>

                                </select>
                                {/* <p onClick={this.yzclick.bind(this)} className="right">获取验证码</p> */}
                            </div>

                            <div className="yzmitem">
                                <p>尺码：</p>
                                <input type="text" value={info.size} onChange={this.inputchangee.bind(this, 'size')} placeholder='请填写尺码' className="size" />
                                {/* <p onClick={this.yzclick.bind(this)} className="right">获取验证码</p> */}
                            </div>
                            <div className="yzmitem">
                                <p>规格：</p>
                                {/* <input type="text"   placeholder='请填写规格'  className="category" /> */}
                                {/* <p onClick={this.yzclick.bind(this)} className="right">获取验证码</p> */}
                                <select value={category || '请选择'} onChange={this.inputchange_category.bind(this)}>
                                    <option value="请选择">请选择</option>
                                    <option value="牛仔拉链">牛仔拉链</option>
                                    <option value="牛仔纽扣">牛仔纽扣</option>
                                    <option value="夏实训">夏实训</option>
                                    <option value="棒球服">棒球服</option>
                                    <option value="长T恤">长T恤</option>
                                    <option value="短T恤">短T恤</option>
  
                                </select>
                            </div>
                            <div className="yzmitem">
                                <p>学校名称：</p>
                                <input type="text" value={info.schoolname} onChange={this.inputchangee.bind(this, 'schoolname')} placeholder='请填写学校名称' className="schoolname" />
                                {/* <p onClick={this.yzclick.bind(this)} className="right">获取验证码</p> */}
                            </div>
                            <div className="yzmitem">
                                <p>收货地址：</p>
                                <input type="text" value={info.address} onChange={this.inputchangee.bind(this, 'address')} placeholder='请填写收货地址' className="address" />
                                {/* <p onClick={this.yzclick.bind(this)} className="right">获取验证码</p> */}
                            </div>
                            <div style={{ display: amount > 0 ? '' : 'none' }} className="yzmitem">
                                <p>费用（含10元邮费）：{amount}元
                                </p>
                                {/* <p onClick={this.yzclick.bind(this)} className="right">获取验证码</p> */}
                            </div>
                            <img src="./src/wxcode.jpg" style={{ width: '80vw' }} className="wxcode" />
                            <img src="./src/paycode.jpg" style={{ width: '80vw', marginBottom: '20px' }} className="wxcode" />
                            <div onClick={() => { info.counts < 2 ? this.confirm() : '' }} className="btn"> {info.counts < 2 ? '提交(剩余' + (2 - info.counts) + '次)' : '提交次数已用完'}  </div>
                        </div>
                }

            </div>

        )
    }
}

ReactDOM.render(
    <div>
        {/* <TopLine /> */}
        <div id='body'>
            {/* <LeftMenu code='banner' /> */}
            <Main />
        </div>
    </div>
    // <Barrage />
    , $('.container')[0]
)